<template>
  <div>


    <div style="padding: 10px 0">
      <el-input style="width: 250px;margin-left: 10px" placeholder="请输入用户名称" :suffix-icon="Search" v-model="searchname"></el-input>

      <el-button type="primary" style="margin-left: 5px" @click="search()">
        <el-icon style="vertical-align: middle;">
          <search />
        </el-icon>
        <span style="vertical-align: middle;"> 搜索 </span>
      </el-button>

      <el-button type="primary" style="margin-left: 5px" @click="search()">
        <span style="vertical-align: middle;" @click="addItem()"> 创建新用户 </span>
      </el-button>
    </div>

    <!--  </el-table>-->

    <el-table :data="tableData" border style="width: 98%;margin-left: 10px" >

      <!--<el-table-column type="expand">
        <template #default="props">
          <div m="4">
            <el-table :data="props.row.users"  >

              <el-table-column label="用户名称 " prop="username" />
              <el-table-column label="用户电话" prop="phone" />


              <el-table-column fixed="right" label="操作" width="370"  align="center">
                <template v-slot="scope">
                  <el-button @click="click(scope.row.name)"  size="default" type="danger">删除<el-icon><check /></el-icon></el-button>
                </template>
              </el-table-column>

            </el-table>

          </div>
        </template>
      </el-table-column>-->

      <el-table-column label="用户ID" prop="id" />
      <el-table-column label="用户名称" prop="username" />
      <el-table-column label="用户描述" prop="description" />
      <el-table-column label="用户电话" prop="phone" />
      <el-table-column label="密保问题" prop="question" />
      <el-table-column label="密保答案" prop="answer" />
      <el-table-column label="可发布问卷数量" prop="itemNum" />

      <el-table-column fixed="right" label="操作" width="370"  align="center">
        <template v-slot="scope">
          <el-button @click="handleClick(scope.row)"  size="default" type="primary">修改信息<el-icon><check /></el-icon></el-button>
          <el-button @click="delOne(scope.row.id)" size="default" type="danger">删除</el-button>
        </template>
      </el-table-column>




    </el-table>


    <el-pagination @size-change="sizeChange" @current-change="currentChange"
                   :current-page="page" :page-size="size" :page-sizes="pageSizes"
                   layout="total,sizes,prev,pager,next，jumper" :total="total">

    </el-pagination>

    <el-dialog title="用户信息" v-model="dialogFormVisible" width="50%">
      <el-form :model="form" size="medium" :rules="rules" ref="form">
        <el-form-item label="用户编号" :label-width="formLabelWidth" prop="itemId">
          <el-input v-model="form.userid" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户名称" :label-width="formLabelWidth" prop="name">
          <el-input v-model="form.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户描述" :label-width="formLabelWidth">
          <el-input v-model="form.description" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户电话" :label-width="formLabelWidth">
          <el-input v-model="form.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="可发布问卷数" :label-width="formLabelWidth">
          <el-input v-model="form.itemNum" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>

      <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel()"> 取消</el-button>
        <el-button type="primary" @click="saveData('form')"> 确认</el-button>
      </span>
      </template>


    </el-dialog>

  </div>
  <!--<div id="tab_1">
    <iframe src="http://www.lyingedu.com/login.html"
            height="500"
            width="1200"
            frameborder="0"
            scrolling="0"
    ></iframe>
  </div>-->
</template>

<script>
import {ElMessage, ElMessageBox} from "element-plus";

export default {
  name: "userManage",
  data(){
    return{
      tableData: '',
      page: '1',
      size: 10,
      total: '',
      allData: '',
      searchname: '',
      form: {},
      formLabelWidth: '100px',
      dialogFormVisible: false, //增加的弹窗
    }
  },
  methods:{
    load(){
      this.$http.post("userManage/userAll").then(res => {
        if (res.statusCode == '200') {
          ElMessage({
            message: '用户信息获取成功',
            type: 'success',
          })
          this.allData=res.data.users
          this.getTableData()
        } else {
          ElMessage.error('获取失败！')
        }
      }).catch(() => {
        ElMessage.error('获取失败！')
      })
    },
    click(data){
      console.log(data)

    },

    currentChange(val){
      this.page=val
      this.getTableData()
    },
    sizeChange(val){
      this.size=val
      this.page=1
      this.getTableData()
    },
    getTableData(){
      this.tableData=this.allData.slice(
          (this.page-1)*this.size,
          this.page*this.size
      )
      this.total=this.allData.length

    },
    search(){
      this.getTableData()
      let text = this.searchname
      let reg = new RegExp(text) //声明正则变量
      this.tableData = this.tableData.filter(item => reg.test(item.username)) //返回
    },
    addItem(){ //添加物品
      this.dialogFormVisible = true
      this.form = {}
      this.form.password='222222'
      this.form.roleId=4
      this.form.isDelete=0
      this.form.question='你是谁'
      this.form.answer='我是我'
      this.form.loginrole=0
      this.form.groupid=0
    },
    handleClick(row){ //编辑
      this.form = row
      this.dialogFormVisible=true
    },
    cancel(){
      this.dialogFormVisible = false
      this.load()
    },
    saveData(resetForm) {
      //console.log(resetForm)
      this.$refs[resetForm].validate((valid)=>{
        if(valid){
          this.$http.post("userManage/save",this.form).then(res=>{
            if(res.statusCode == '200'){
              ElMessage({
                message: '成功！',
                type: 'success',
              })
              this.dialogFormVisible=false
              this.load()
            }
          }).catch(()=>{
            ElMessage.error('失败！')
          })
        }else{
          ElMessage({
            message: '已取消！',
            type: 'warning',
          })
          return false;
        }
      })
    },
    delOne(id){ //删除
      ElMessageBox.confirm(
          '是否删除选中数据？',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
      ).then(() => {
        this.$http.delete("userManage/del/"+id).then(res=>{
          if(res.statusCode == '200'){
            ElMessage({
              message: '删除成功！',
              type: 'success',
            })
            this.load()
          }
        }).catch(()=>{
          ElMessage.error('删除失败！')
        })
      }).catch(() => {
        ElMessage({
          type: 'info',
          message: '已取消！',
        })
      })
    },
  },
  created() {
    this.load()
  }
}
</script>

<style scoped>

</style>
